<script lang="ts" setup>
//功能用插槽
//观察一个数组对象，有值输出A，无值输出B，3秒后还是无值则输出C - 请配合监听使用
//常用在页面模块逻辑判断中，有内容则显示，无内容加载骨架屏，3秒后显示提示内容
import { ref, watch, onUnmounted } from "vue";
interface Props {
  data: any;
}
const props = defineProps<Props>();
const showContent = ref();

//初始判断
if (props.data?.length !== 0) {
  console.log("有值");
  showContent.value = "A";
} else {
  console.log("没有值");
  showContent.value = "B";
}

//监听
watch(
  () => props.data,
  (newVal, oldVal) => {
    if (newVal?.length !== 0) {
      showContent.value = "A";
    } else {
      showContent.value = "B";
      setTimeout(() => {
        if (newVal.length == 0) {
          showContent.value = "C";
        }
      }, 3000);
    }
  }
);
</script>
<template>
  <div>
    <div v-if="showContent === 'A'"><slot name="yes"></slot></div>
    <div v-if="showContent === 'B'"><slot name="skeleton"></slot></div>
    <div v-if="showContent === 'C'"><slot name="no"></slot></div>
  </div>
</template>
